<!--
 * @Author: sichuntian sichuntian@smartmappingtek.com
 * @Date: 2024-05-23 16:24:02
 * @LastEditTime: 2024-06-05 18:40:56
 * @Description: 
 * 
-->
<template>
    <transition name="toLeft">
        <div v-if="state.show" class="left">
            <dv-border-box-1 class="project-info left-item"></dv-border-box-1>
            <dv-border-box-9 class="project-date left-item"></dv-border-box-9>
            <dv-border-box-12 class="project-progress left-item"></dv-border-box-12>
        </div>
    </transition>
</template>

<script setup>
import { reactive } from "vue";

const state = reactive({
    show: false,
});

function isShow(boolean) {
    state.show = boolean;
}
defineExpose({
    isShow,
});
</script>

<style scoped lang="less">
.left {
    position: absolute;
    left: 0;
    top: 80px;
    width: 370px;
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .left-item {
        img {
            width: 100%;
            padding: 5px 10px;
            box-sizing: border-box;
        }
    }

    .project-info {
        height: 300px;
        width: 100%;

        .content-box {
            color: #fff;
            height: calc(100% - 44px);
            overflow: auto;
            font-size: 12px;
            letter-spacing: 1px;
        }

        p {
            text-indent: 2em;
            padding: 0 15px;
        }
    }

    .project-date {
        height: 200px;
        width: 100%;

        .percent {
            box-sizing: border-box;
            width: 320px;
            height: 20px;
            margin: 0 15px;
        }
    }

    .project-progress {
        flex: 1;
        width: 100%;

        .bar {
            box-sizing: border-box;
            width: 100%;
            height: 300px;
            padding: 0 15px;
        }
    }
}

.right {
    position: absolute;
    right: 0;
    top: 80px;
    width: 370px;
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
<style>
.dv-percent-pond text {
    font-size: 16px;
}
</style>